<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3.事件流以及代码验证</title>
    <style>
        .father {
            margin: 200px;
            width: 300px;
            height: 300px;
            background-color: #bfa;
            position: absolute;
          
        }
        .son{
            margin: 100px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        //DOM事件流指的是事件在文档对象模型里的传播过程。
        //比如说点击事件，根据文档流模型，页面中所有的元素节点都在文档对象里，所以，点击事件最先从文档开始生效（如果文档注册了点击事件），继而是html body 然后到自己定义的元素节点对象。这一过程称为捕获阶段
        //然后事件在目标元素生效，这个过程叫目标阶段。然后事件冒泡按照捕获阶段相反方向传递到文档对象，事件按层次逐一触发。这个过程叫冒泡阶段
        //element.addEventListener('type',fn,capture) 其中capture指定事件阶段，当为true时指捕获阶段 为空或者false 为冒泡阶段
        //开发中冒泡事件用的多，部分事件没有冒泡阶段 比如 onfocus onblur onmouseenter onmouseleave等
        var son=document.querySelector('.son');
        var father=document.querySelector('.father');
        // son.addEventListener('click',fn1,true);//事件阶段处于捕获阶段
        // function fn1(){
        //     alert('梨花一枝春带雨');
        // };
        // father.addEventListener('click',fn,true);
        // function fn(){
        //     alert('便胜却人间无数');
        // };
        son.addEventListener('click',fn1,false);//事件阶段处于冒泡阶段
        function fn1(){
            alert('梨花一枝春带雨');
        };
        father.addEventListener('click',fn,false);
        function fn(){
            alert('便胜却人间无数');
        };
        document.addEventListener('click',fn2,false);
        function fn2(){
            alert('纵有千种风景，更与何人诉说');
        }

    </script>

</body>

</html>